import React, {useState, useEffect, useRef} from 'react'
import Table from '@/components/table/Table'
import {Tag, Space, Modal, Input, Button, Row, Col} from 'antd';
import Floor from './floor'
import EditRoom from './room'
import Batch from './batch'
import Search from '@/components/serch/index'
import { PlusCircleFilled, EditFilled, CopyFilled } from '@ant-design/icons'
interface IProps {

}
interface IState {
  list: any[],
  visible: boolean,
  titleName: string,
  form: any
}
interface validateForm {
  userName?: string,
  passWord?: number
}
const Room = (props:any, ref: any)=>{
  let child: any = useRef()
  // const [isAdd, setisAdd] = useState<boolean>(false) // 新增编辑开关
  const [list, setlist] = useState<any>([]) // 列表数据
  const [visible, setvisible] = useState(false) //弹窗开关
  const [titleName, settitleName] = useState('新增') // 标题名
  // const [form, setform] = useState<validateForm>({})  // 初始化表单
  const [isFloor, setisFloor] = useState<boolean>(false)  // 是否展示详情
  const [width, setWidth] = useState<number>(500)  // 初始化表单
  const [isEditRoom, setisEditRoom] = useState<boolean>(false);
  const [isBatch, setisBatch] = useState<boolean>(false);
  const columns = [
    {
      title: '总楼层',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      render: (text: any) => <span>{text}</span>,
    },
    {
      title: '房间号',
      dataIndex: 'card',
      align: 'center',
      key: 'card',
    },
    {
      title: '房型',
      dataIndex: 'sex',
      key: 'sex',
      align: 'center',
      render: (text: any) => <span>{text}</span>,
    },
    {
      title: '床位数',
      dataIndex: 'card',
      align: 'center',
      key: 'card',
    },
    {
      title: '入住状态',
      dataIndex: 'card',
      align: 'center',
      key: 'card',
    },
    {
      title: '更新时间',
      dataIndex: 'card',
      align: 'center',
      key: 'card',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (record: any) => (
        <Space size="middle">
          <Button onClick={()=>editRoomds()} type='primary'>编辑房间</Button>
        </Space>
      ),
    },
  ]
  const searchList = [
    {
      render:()=>{
        return <div>
            <Row>
              <Col span={16}><Input placeholder={'房号 / 房型查询'}></Input></Col>
              <Col span={6} offset='2'><Button className='mb20' type='primary'>搜索</Button></Col>
            </Row>
        </div>
      }
    },
  ]
  // const edit = (record: any)=>{
  //   // 办理入住
  //   settitleName('编辑')
  //   setform({userName: record.name, passWord: record.age})
  //   setIsDetail(false)
  //   setWidth(500)
  //   setvisible(true)
  // }
  // const detail =  (record: any)=>{
  //   // 核验详情
  //   settitleName('核验详情')
  //   setIsDetail(true)
  //   setWidth(1000)
  //   setvisible(true)
  // }
  const handleOk = (e: any)=>{
    console.log(child);
    // 表单submit
    // child.current.validateFields().then((res:any)=>{ //  表单验证通过
      
    // }).catch(((res: any)=>{ // 表单验证不通过
      
    // }))
    setvisible(false)
  }
  const handleCancel = ()=>{
    //取消
    setvisible(false)
  }  
  // const goAdd = (val: any) =>{
  //   // 开启表单
  //   setisAdd(val)
  // }
  useEffect(() => {
    let array: any[] = [
      {
        key: '1',
        name: '15',
        age: 32,
        card: '12',
        address: 'New York No. 1 Lake Park',
        tags: ['成功', '失败'],
      },       
    ]
    setlist([...array])
  }, [])
  const addFloor = ()=>{
    setWidth(800)
    settitleName('添加楼层')
    setvisible(true)    
    setisBatch(false)
    setisEditRoom(false)
    setisFloor(true)
  }
  const editRoomds = ()=>{
    setWidth(800)
    settitleName('编辑房间')
    setvisible(true)
    setisEditRoom(true)
    setisBatch(false)
    setisFloor(false)
  }
  const BatchOperation = ()=>{
    setWidth(800)
    settitleName('批量更改房型')
    setvisible(true)
    setisEditRoom(false)
    setisBatch(true)
    setisFloor(false)    
  }  
  return (
    <div>
      {
        <>
          <Search searchList={searchList}>
            <Button className='mb20' icon={<PlusCircleFilled/>} type='primary' onClick={addFloor}>添加楼层</Button>
            <Button className='mb20' icon={<EditFilled />} type='primary' onClick={addFloor}>编辑楼层</Button>
            <Button className='mb20' icon={<CopyFilled />} type='primary' onClick={BatchOperation}>批量更改房型</Button>
          </Search>
          <Table columns={columns} list={list}/>
            <Modal
            getContainer={false}
            title={titleName}
            visible={visible}
            onOk={handleOk}
            onCancel={handleCancel}
            width={width}
          >
            {
              isFloor ? <Floor/> : null
            }
            {
              isEditRoom ?<EditRoom/> : null
            }
            {
              isBatch ?<Batch/> : null
            }            
          </Modal>
        </>   
      }                 
    </div>
)  
}

export default Room